<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
		*{padding: 0; margin: 0;}
			html,body{
				width: 100%;
				height: 100%;
				background: #000;
				overflow: hidden;
				background-image: url(001.jpg);
				background-size: 100% 100%;
				position: relative;
			}
			#all{
				width: 540px;
				height: 640px;
			/*	background:#fff;*/
				padding: 30px;
				position: absolute;
				top: 100px;
				left: 70px;
			}
			#top{
				width: 100%;
				height: 30%;
				position: relative;
			}
			#move {
				float: left;
				width: 120px;
				height: 120px;
				background: burlywood;
				border-radius: 50%;
				position: absolute;
				top: 15px;
				left: 330px;
				background-image: url(002.jpg);
				background-position:0 0 ;
				background-size:100% 100% ;
				overflow: hidden;
				/*animation: move 10s linear infinite;*/
				opacity: .9;
			}
			#move:hover{
				opacity: 1;
			}
			@keyframes move{
				0%{transform:rotate(0deg) ;}
				100%{transform:rotate(360deg);}
			}
			
			#top a.next{
				display: block;
				float: left;
				width: 70px;
				height: 70px;
				background-image: url(bj.png);
				background-size:400px 233px;
				background-color: #ffddd4;
				border: 1px solid#000;
				border-radius: 50%;										
			}
			#top a.one{
				width: 148px;
				height: 148px;
				background:yellowgreen url(bj.png) no-repeat -327px 0px;
				margin-top: 20px;
				
				border-radius: 50%;
			}
			
			#top a.two{
				background-position-x: -327px;
				background-position-y: -3px;
				margin-left: 60px;	
				margin-top: 20px;
				margin-right: 110px;
			}
			#top a.three{
				float: right;
				background-position: -244px -3px;	
				margin-right: 30px;
				margin-top: 20px;
			}
			#top .btn{
				display: block;
				width: 120px;
				height: 114px;
			}
			#top a.jingyin{
				width: 60px;
				height: 57px;
				float: left;
				background-image: url(ylT.png);
				background-position:0 0;
				background-size:100% 100% ;
				margin: 25px 50px 0 10px;
				border-radius:50% ;
			}
			#top a.four{
				width: 60px;
				height: 57px;
				float: left;
				background-image: url(yljian.png);
				background-position:0 0;
				background-size:100% 100% ;
				margin: 25px 5px 0 10px;
				border-radius:50% ;
			}
			#top input.five{
				float: left;
				margin-top: 43px;
			}
			#top a.six{
				width: 60px;
				height: 57px;
				float: right;
				background-image: url(yljia.png);
				background-position:0 0;
				background-size:100% 100% ;
				margin: 25px 0 0 0px;
				border-radius:50% ;
			}
			#top a.next:hover{
				background-position-y: -81px;
			}
			#top a.one:hover{
				background-position-y: -156px;
			}
			#ylval{
				width: 50px;
				height: 50px;
				display: block;
				position: absolute;
				top:120px;
				left: 225px;
				text-align: center;
				line-height: 50px;
				font-size: 29px;
			}
			#center{
				width: 100%;
				height: 7%;
				background: #000;
				overflow: hidden;
				margin-top: 10px;
				border-radius: 10px;
				position: relative;
				opacity: .6;
			}
			#center .wai{
				width: 70%;
				height: 20%;
				background: #ccc;
				margin: 17px auto 0;
				position: relative;
				border-radius: 4px;
				
			}
			#center .wai .neil{
				width: 0px;
				height: 100%;
				background: darkmagenta;
				position: absolute;
				top: 0px;
				left: 0px;
			}
			#center .wai .neir{
				width: 20px;
				height: 20px;
				background: #fff;
				border-radius: 50%;
				position: absolute;
				top: -5px;
				left: -5px;
				z-index: 2;
			}
			#center #nowtime{
				width: 70px;
				height: 45px;
				line-height: 45px;
				padding-left: 5px;
				position: absolute;
				top: 0px;
				left: 0px;
				z-index: 3;
				color: #fff;
			}
			#center #alltime{
				width: 70px;
				height: 45px;
				line-height: 45px;
				position: absolute;
				top: 0px;
				left: 470px;
				z-index: 3;
				color: #fff;
			}
			#bottom{
				width: 80%;
				height: 40%;
				/*background: yellow;*/
				margin-top: 10px;
				padding:50px 10% 0;
				overflow: hidden;
			}
			#gcdiv{
				width:100% ;
				height: 100%;
				
			}
			#gcdiv p{
				width:100% ;
				height: 20%;
				text-align: center;
				line-height: 50px;
				font-size: 16px;
				color: #000;
				
			}
		</style>
		<script>
			window.onload = function(){
				function Audio(aud,ele){
				var _this=this;
				this.aud=document.getElementById(aud);
				this.btn=document.getElementsByClassName(ele);
				this.wai=document.getElementsByClassName("wai")[0];
				this.neir=document.getElementsByClassName("neir")[0];
				this.neil=document.getElementsByClassName("neil")[0];
				this.ntime = document.getElementById("nowtime");
				this.atime = document.getElementById("alltime");
				this.move = document.getElementById("move");
				this.ylval = document.getElementById("ylval");
				this.yltiao = document.getElementById("yltiao");
				this.txt = document.getElementById("txt");
				this.gcdiv = document.getElementById("gcdiv");
				
				var timer=null;
				this.btn[0].onclick=function(){
					if(_this.aud.paused){
						_this.oplay(_this.aud)
						this.style.backgroundPositionX="-2px";
						this.style.backgroundColor="#f00";
						_this.move.style.animation="move 10s linear infinite";
						_this.ntime.innerHTML=_this.time(_this.aud.currentTime)
						timer=setInterval(function(){_this.nowtime()},1000)
						_this.atime.innerHTML=_this.time(_this.aud.duration)
					}else{
						_this.opause(_this.aud)
						this.style.backgroundPositionX="-327px";
						this.style.backgroundColor="#f60";
						_this.move.style.animation="move 10s linear paused";
						clearInterval(timer)
					}
				}
				
				this.neir.onmousedown=function(ev){
					var ev=ev||window.event
					ev.preventDefault()
					var x=ev.clientX-_this.neir.offsetLeft
					document.onmousemove=function(ev){
						var ev=ev||window.event
						ev.preventDefault()
						var left=ev.clientX-x
						if(left<0){
							left=0
						}else if(left>_this.wai.offsetWidth-_this.neir.offsetWidth){
							left=_this.wai.offsetWidth-_this.neir.offsetWidth
						}
						_this.neir.style.left=left+"px"
						_this.neil.style.width=(20+left)+"px"
						var b=left/(_this.wai.offsetWidth-_this.neir.offsetWidth)
						_this.aud.currentTime=b*_this.aud.duration
						
					}
					document.onmouseup=function(){
						document.onmousedown=null;
						document.onmousemove=null;
					}
				}
				/*静音*/
				//alert(this.btn[3])
				this.btn[3].onclick=function(){
					if(_this.aud.muted){
						//console.log(_this.aud.muted)
						this.style.backgroundImage="url(ylT.png)"
						_this.aud.muted=false;
						this.value="音量"
					}else{
						//console.log(_this.aud.muted)
						this.style.backgroundImage="url(ylF.png)"
						_this.aud.muted=true;
						this.value="静音"
					}
				}
				
//				this.btn[4].onclick=function(){
//				if(_this.aud.webkitRequestFullScreen){
//					_this.aud.webkitRequestFullScreen()
//				}else if(_this.aud.mozRequestFullScreen){
//					_this.aud.mozRequestFullScreen()
//				}else if(_this.aud.requestFullscreen){
//					_this.aud.requestFullscreen()
//				}
//					
//				}
				
				this.yltiao.onmouseup=function(){
					_this.aud.volume=this.value/100;
					_this.ylval.innerHTML = _this.yltiao.value + "%";
				}
				
				
				this.btn[4].onclick=function(){
					_this.aud.volume=0.25
					_this.yltiao.value = "25";
					_this.ylval.innerHTML = "25"+"%";
				}
				
				this.btn[5].onclick=function(){
					_this.aud.volume=0.75
					_this.yltiao.value = "75";
					_this.ylval.innerHTML = "75"+"%";
				}
				
				var geciI = _this.txt.innerText;
				var geciII = geciI.split("[");
				//alert(geciII)
				var str = "";var s = 0;var k = 0;
				for (var i = 1 ; i < geciII.length ; i++){
					k++;
					var geciIII = geciII[i].split("]");
					var geciIIII = geciIII[0].split(".");
					var geciIIIII = geciIIII[0].split(":");
					s = geciIIIII[0]*60 + geciIIIII[1]*1;
					str+='<p id="n'+s+'" shuzi='+k+'>'+geciIII[1]+'</p>';
					//console.log(i)
					
				}
				this.gcdiv.innerHTML = str;
				//console.log(str)
			
				this.aud.addEventListener("timeupdate",function(){
					var currtime=parseInt(_this.aud.currentTime);
					var op = _this.gcdiv.getElementsByTagName("p");
					//console.log(currtime)
					//console.log(document.getElementById("n"+currtime))
					if(document.getElementById("n"+currtime)){
						for(var i = 0; i < op.length ; i++ ){
							op[i].style.color="#000";
							op[i].style.fontSize="16px";
							if(document.getElementById("n"+currtime) == op[i]){
								var weiyi =Number(i)-2;
								if(weiyi<=0){
									weiyi = 0;
								}
									_this.gcdiv.style.marginTop = (weiyi)*(-50)+"px";
									console.log(weiyi)
									console.log(_this.gcdiv.style.marginTop)
							}
						}
						document.getElementById("n"+currtime).style.color="red";
						document.getElementById("n"+currtime).style.fontSize="26px";
						console.log(document.getElementById("n"+currtime).id)
					}
					
				})

				
				
				
				
			}
			Audio.prototype={
				oplay:function(obj){
					obj.play()
				},
				opause:function(obj){
					obj.pause()
				},
				nowtime:function(){
					var m=this.aud.currentTime/this.aud.duration
					this.ntime.innerHTML=this.time(this.aud.currentTime)
					this.neir.style.left=m*(this.wai.offsetWidth-this.neir.offsetWidth)+"px"
					
					this.neil.style.width=0+m*(this.wai.offsetWidth-this.neir.offsetWidth)+"px"
				},
				time:function(time){
					time=parseInt(time)
					var h=this.zero(Math.floor(time/3600))
					var m=this.zero(Math.floor(time%3600/60))
					var s=this.zero(Math.floor(time%60))
					return h+":"+m+":"+s
				},
				zero:function(num){
					if(num<10){
						return "0"+num
					}else{
						return num
					}
				}
			}
			new Audio("aud","btn")
			}
		</script>
	</head>
	<body>
		<div id="all">
			<audio id="aud" src="audio/04.mp3"></audio>
			<div id="move"></div>
			<div id="top">
				
				<a href="javascript:;" class="next btn one"></a>
				<a href="javascript:;" class="next btn two"></a>
				<a href="javascript:;" class="next btn three"></a>
				<a href="javascript:;" class="btn jingyin"></a>
				<a href="javascript:;" class="btn four"></a>				
				<input type="range" id="yltiao" class="five" max="100"  />
				<a href="javascript:;" class="btn six"></a>
				<span id="ylval">50%</span>
			</div>
			<div id="center">
				<span id="nowtime">00:00:00</span>
				<div class="wai">
					<div class="neir"></div>
					<div class="neil"></div>
				</div>
				<span id="alltime">00:00:00</span>
			</div>
			<div id="bottom">
				<textarea id="txt" style="display: none;">
					[00:00.10]星月神话 - 金莎
					[00:08.20]词：金莎
					[00:16.30]曲：金莎
					[00:24.40]编曲：金莎
					[00:37.64]我的一生最美好的场景
					[00:42.95]就是遇见你
					[00:48.14]在人海茫茫中静静凝望着你
					[00:54.64]陌生又熟悉
					[01:00.69]啊~~~~~~~~~~~~
					[01:11.52]尽管呼吸着同一天空的气息
					[01:17.64]却无法拥抱到你
					[01:21.95]如果转换了时空身份和姓名
					[01:28.70]但愿认得你眼睛
					[01:34.33]千年之后的你会在哪里
					[01:40.08]身边有怎样风景
					[01:45.96]我们的故事并不算美丽
					[01:51.65]却如此难以忘记
					[01:59.65]
					[02:20.40]啊~~~~~~~~~~~~
					[02:32.40]尽管呼吸着同一天空的气息
					[02:38.64]却无法拥抱到你
					[02:43.90]如果转换了时空身份和姓名
					[02:49.60]但愿认得你眼睛
					[02:55.29]千年之后的你会在哪里
					[03:00.97]身边有怎样风景
					[03:06.85]我们的故事并不算美丽
					[03:12.54]却如此难以忘记
					[03:18.55]如果当初勇敢的在一起
					[03:24.12]会不会不同结局
					[03:30.06]你会不会也有千言万语
					[03:35.81]埋在沉默的梦里
					[03:32.81]
				</textarea>
				<div id="gcdiv">
					
				</div>
			</div>
		</div>
	</body>
</html>
